<template>
 
    <el-popover
        placement="bottom-end"
        :width="300"
        trigger="click"
    >
        <template #reference>
        <div class="message-btn">
            <el-badge is-dot class="badge-item" type="danger">
                <SvgIcon name="message"/>
            </el-badge>
        </div>
        </template>
         <el-tabs v-model="activeName" type="card" >
            <el-tab-pane label="通知(4)" name="first" >
                <TabItem v-for="item in tabList" :key="'first' + item.title" :url="item.url" :title="item.title" :content="item.content"/>
            </el-tab-pane>
            <el-tab-pane label="消息(4)" name="second">
                <TabItem v-for="item in tabList" :key="'second' + item.title" :url="item.url" :title="item.title" :content="item.content"/>
            </el-tab-pane>
            <div class="tab-btn">
                <el-button @click="clear">清空</el-button>
                <el-button>更多</el-button>
            </div>
           
        </el-tabs>
    </el-popover>
</template>

<script>
import TabItem from './TabItem'
import {ref} from 'vue'
export default {
    name: 'MessageBtn',
    components:{
        TabItem
    },
    setup(){
        const activeName = ref('first')
        
        const tabList = ref([
            {
                url:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                title: "作业写完了么还睡觉",
                content: "一年前"
            },
            {
                 url:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                title: "代码写完了么还睡觉",
                content: "二年前"
            },
            {
                 url:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                title: "考试过了么还睡觉",
                content: "三年前"
            },
            {
                 url:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                title: "拖地了么还睡觉",
                content: "四年前"
            }
        ])

        const clear = ()=>{
            tabList.value.splice(0,tabList.value.length)
        }


        return{
            activeName,tabList,clear
        }
    }
}
</script>

<style lang="scss">
.message-btn{
    display: inline-block;
    padding: 0px 17px;
    height: 50px;
     &:hover{
            cursor: pointer;
            background-color: rgba(0,0,0,0.3);
        }
    .el-badge__content.is-fixed{
        top: 12px !important;
    }  
}

.tab-btn{
    text-align: center;
    margin-top: 5px;
    .el-button{
        width: 120px;
    }
}

</style>
